<template>
  <div class="product-detail">
    <h1>{{ product.name }}</h1>
    <img :src="product.image" alt="Product Image" />
    <p>{{ product.description }}</p>
    <p>价格: {{ product.price }}</p>
    <el-button @click="addToCart(product.id)">加入购物车</el-button>
  </div>
</template>

<script>
import { getProductDetail } from '@/api/product';

export default {
  data() {
    return {
      product: {},
    };
  },
  methods: {
    async fetchProductDetail() {
      const productId = this.$route.params.productId;
      const response = await getProductDetail(productId);
      this.product = response.data;
    },
    addToCart(productId) {
      // 添加到购物车逻辑
    },
  },
  mounted() {
    this.fetchProductDetail();
  },
};
</script>

<style scoped>
.product-detail {
  padding: 20px;
}
</style> 